<template>
  <div class="container">
    <a-skeleton :loading="loading" active :paragraph="{ rows: 4 }">
      <nav class="nav-banner">
        <a-carousel autoplay>
          <div v-for="(item, idx) in bannerCoverList" :key="idx" class="banner-cover">
            <img :src="item" alt="" />
          </div>
        </a-carousel>
      </nav>
      <section class="main-page">
        <aside class="aside-list">
          <div class="user-info">
            <img class="user-info-head" src="http://avatar.test.file.mediportal.com.cn/d79561f27d9345dbb3b79c400f751f0b" alt="" />
            <p class="user-info-name">EVA WU</p>
            <ul class="user-info-flex">
              <li class="user-info-left">
                <p class="user-attention">120</p>
                <p class="user-attention-title">关注了</p>
              </li>
              <li class="user-info-right">
                <p class="user-attention">5858</p>
                <p class="user-attention-title">关注者</p>
              </li>
            </ul>
            <a-button type="primary" block> 关 注 </a-button>
          </div>
          <div class="user-honour">
            <p><img src="./imgs/wirte.png" alt="" />创作 100 篇公开文档</p>
            <p style="margin-top: 12px"><img src="./imgs/favour.png" alt="" />获得 466 个赞</p>
          </div>
          <div class="ad-banner">
            <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4f86c0f8a524b7e9fc4830546a0f0ab~tplv-k3u1fbpfcp-watermark.image" alt="" />
            <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a0055d3bb064952ba3f6e1295168b8c~tplv-k3u1fbpfcp-watermark.image" alt="" />
          </div>
        </aside>
        <article class="article-content">
          <h5 class="sift">精选</h5>
          <article-card card-type="1" />
          <h5 class="sift">Active members</h5>
          <article-card card-type="3" />
          <h5 class="sift">文章列表</h5>
          <article-card card-type="2" />
        </article>
      </section>
    </a-skeleton>
  </div>
</template>

<script>
export default {
  asyncData(content) {
    // const { data } = await content.$axios.get('/patient-meeting/guest/meeting/countLiveOutNotRecord')
    return { title: '666' }
  },
  data() {
    return {
      title: '',
      loading: true,
      bannerCoverList: [
        'https://mokr.oss-cn-hangzhou.aliyuncs.com/cover/2020090906.jpg',
        'https://mokr.oss-cn-hangzhou.aliyuncs.com/cover/2020090907.jpg',
        'https://mokr.oss-cn-hangzhou.aliyuncs.com/cover/2020090908.jpg',
        'https://mokr.oss-cn-hangzhou.aliyuncs.com/cover/2020090909.jpg',
      ], // banner图
    }
  },
  mounted() {
    // await this.$axios.get('/patient-meeting/guest/meeting/countLiveOutNotRecord')
    // console.log(data)
    this.title = '888'
    this.loading = false
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 10px 40px;
  .nav-banner {
    max-width: 1056px;
    height: 228px;
    margin-bottom: 12px;
    background: #f1f1f1;
    .banner-cover {
      height: 228px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .main-page {
    display: flex;
    flex-flow: row nowrap;
    max-width: 1056px;
    .aside-list {
      flex: 0 0 27%;
      height: 1000px;
      .user-info {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        height: 394px;
        padding: 20px 20px 26px;
        background: #fff;
        &-head {
          width: 160px;
          height: 160px;
          border-radius: 50%;
        }
        &-name {
          font-size: 18px;
          color: #262626;
          margin-top: 30px;
        }
        &-flex {
          display: flex;
          flex-flow: row nowrap;
          width: 100%;
          text-align: center;
          margin: 22px 0;
          cursor: pointer;
          .user-info-left {
            flex: 1;
          }
          .user-info-right {
            flex: 1;
          }
          .user-attention {
            font-size: 22px;
            font-weight: 500;
            color: #424242;
            line-height: 26px;
            margin-bottom: 5px;
          }
          .user-attention-title {
            font-size: 12px;
            color: #888;
            line-height: 22px;
          }
        }
      }
      .user-honour {
        padding: 24px;
        background: #fff;
        border-top: 1px solid #e8e8e8;
        img {
          width: 16px;
          height: 16px;
          margin-right: 2px;
        }
      }
      .ad-banner {
        margin-top: 20px;
        background: #fff;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          margin-bottom: 12px;
          cursor: pointer;
        }
      }
    }
    .article-content {
      flex: 0 0 72%;
      background: #fff;
      margin-left: 1%;
      padding: 4px 8px 20px;
      .sift {
        height: 38px;
        line-height: 48px;
        font-size: 14px;
        color: #595959;
        padding-left: 8px;
      }
    }
  }
}
</style>
